<template>
    <div class="container">
        <header>
            <img src="/static/images/logo.png">
            <div class="submit">
                <div class="d-flex space-between middle">
                    <span>欢迎进入华侨城！</span>
                    <button
                        type="primary"
                        size="mini"
                        @click="toLogin"
                        v-if="!token"
                    >
                        <icon class="iconfont icon-weixin"></icon>
                        点击登录
                    </button>
                    <button
                        size="mini"
                        type="primary"
                        v-else
                    >购买大益茶<icon class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"></icon></button>
                </div>
                <!-- <div
                    class="userInfo d-flex space-between middle"
                >
                    <div class="d-flex middle">
                        <img :src="userInfo.avatarUrl">
                        <span>欢迎！{{ userInfo.nickName }}</span>
                    </div>
                    <button
                        size="mini"
                        type="primary"
                    >购买大益茶<icon class="iconfont icon-changyongtubiao-xianxingdaochu-zhuanqu-"></icon></button>
                </div> -->
            </div>
        </header>
        <swiper
            class="swiper"
            circular
            @change="changeSwiper"
        >
            <swiper-item
                v-for="(item, index) in swiperList"
                :key="index"
                @click="toDetail(item.id)"
            >
                <img :src="item.overImg">
                <div class="content">
                    <h3>{{ item.title }}</h3>
                    <p class="ellipsis">{{ item.introduce }}</p>
                    <button size="mini">点击阅读</button>
                </div>
                <div class="dots d-flex flex-end">
                    <span
                        v-for="(item1, index1) in swiperList.length"
                        :key="index1"
                        :class="[currentIndex === index1 ? 'active' : '']"
                    ></span>
                </div>
            </swiper-item>
        </swiper>
        <div class="recommand">
            <h4>
                <icon class="iconfont icon-wenzhang"></icon>
                <span>推荐好文</span>
            </h4>
            <section
                v-for="(item, index) in articleList"
                :key="index"
                @click="toDetail(item.id)"
            >
                <img :src="item.overImg">
                <div class="content">
                    <h3>{{ item.title }}</h3>
                    <p class="ellipsis">{{ item.introduce }}</p>
                    <div class="bottom d-flex space-between">
                        <span>
                            <label class="iconfont icon-yanjing"></label><label>{{ item.browseCount }}</label>
                            <label class="iconfont icon-thumbup thumbup"></label><label>{{ item.likesCount }}</label>
                        </span>
                        <span>{{ item.createTime }}</span>
                    </div>
                </div>
            </section>
        </div>
    </div>
</template>
<script>
import { formatTime } from "@/utils";

export default {
    data() {
        return {
            ifLogin: false,
            articleList: [],
            swiperList: [], // 轮播列表
            userInfo: {},
            token: "",
            currentIndex: 0 // 轮播图当前索引
        };
    },
    onLoad() {
        this.token = wx.getStorageSync("token");
    },
    onShow() {
        this.getHomeInfo();
    },
    methods: {
        // 获取首页内容
        getHomeInfo() {
            this.$http
                .post({
                    url: this.$services.GET_HOME_PAGE,
                    data: {
                        appid: "wxac10e0b6b389fe20"
                    }
                })
                .then(res => {
                    this.articleList = res.miniAppletContentVos.filter(
                        item => item.setTop === 0
                    );
                    for (const v of this.articleList) {
                        v.createTime = formatTime(v.createTime);
                    }
                    this.swiperList = res.miniAppletContentVos.filter(
                        item => item.setTop === 1
                    );
                    this.globalData.appletCode = res.appletCode; // 用户来源编码
                });
        },
        // 跳转到详情页
        toDetail(id) {
            wx.navigateTo({
                url: "/pages/detail/main?id=" + id
            });
        },
        // 跳转到登录页
        toLogin() {
            wx.navigateTo({
                url: "/pages/login/main"
            });
        },
        // 切换轮播图
        changeSwiper(e) {
            this.currentIndex = e.mp.detail.current;
        },
        // 获取用户信息
        getUserInfo() {
            wx.getSetting({
                success: res => {
                    if (res.authSetting["scope.userInfo"]) {
                        // 已经授权，可以直接调用 getUserInfo 获取头像昵称
                        wx.getUserInfo({
                            success: res => {
                                this.ifLogin = true;
                                this.userInfo = res.userInfo;
                                wx.setStorageSync("userInfo", this.userInfo);
                            },
                            fail(res) {
                                console.log("获取用户信息失败", res);
                            }
                        });
                    } else {
                        console.log("未授权=====");
                    }
                }
            });
        }
    }
};
</script>
<style lang="scss" scoped>
.container {
    header {
        padding: 0 15px;
        img {
            width: 80px;
            height: 30px;
        }
        .submit {
            margin: 15px 0;
            span {
                font-size: 20px;
                font-weight: bold;
                color: #6c6c6c;
            }
            button {
                border-radius: 30px;
                margin: 0;
                box-shadow: 5px 5px 5px #96f9b1;
            }
        }
        .userInfo {
            img {
                width: 30px;
                height: 30px;
                border-radius: 50%;
            }
            span {
                font-size: 13px;
                color: #9b9b9b;
                font-weight: bold;
                margin-left: 5px;
            }
        }
    }
    .wx-swiper-dots {
        position: relative;
        left: unset !important;
        right: 0;
    }
    .wx-swiper-dots.wx-swiper-dots-horizontal {
        margin-bottom: -5rpx;
    }
    .swiper {
        margin: 10px 0 20px;
        position: relative;
        height: 225px;
        img {
            width: 100%;
        }
        .content {
            position: absolute;
            color: #fff;
            width: 300px;
            top: 50px;
            left: 15px;
            h3 {
                font-size: 20px;
                font-weight: bold;
            }
            p {
                margin: 15px 0;
            }
            button {
                border-radius: 15px;
            }
        }
        .dots {
            position: absolute;
            bottom: 10px;
            width: 100%;
            height: 10px;
            span {
                width: 10px;
                height: 10px;
                margin: 0 6px;
                border-radius: 50%;
                background: rgba($color: #979797, $alpha: 0.4);
            }
            .active {
                background: #fff;
            }
        }
    }
    .recommand {
        padding: 0 15px;
        > h4 {
            font-size: 17px;
            color: #4a4a4a;
            font-weight: bold;
            .iconfont {
                font-size: 18px;
                margin-right: 5px;
            }
        }
        section {
            margin: 25px 0;
            border: 1px solid #eee;
            border-radius: 10px;
            box-shadow: 5px 5px 5px rgba($color: #000000, $alpha: 0.1);
            img {
                width: 100%;
                border-radius: 10px 10px 0 0;
            }
            .content {
                padding: 0 10px;
                h3 {
                    font-size: 20px;
                    color: #4a4a4a;
                    margin: 13px 0 9px;
                    font-weight: bold;
                }
                p {
                    margin-bottom: 20px;
                    color: #9b9b9b;
                    line-height: 20px;
                    overflow: hidden;
                }
                .bottom {
                    padding: 13px 0;
                    font-size: 13pxx;
                    border-top: 1px solid #eee;
                    color: #9b9b9b;
                    label {
                        margin-right: 5px;
                    }
                    .thumbup {
                        margin-left: 15px;
                    }
                }
            }
        }
    }
}
</style>
